<template>
    <Row>
        <Col span="24">
            <Button @click="showCreateUser = true; isUpdate = false">新建</Button>
            <Button @click="showCreateUser = true; isUpdate = true">修改</Button>
            <Button @click="deleteUser">删除</Button>
            <Divider/>
            <Table
                    highlight-row
                    @on-current-change="onCurrentChange"
                    :columns="columns"
                    :data="data">

            </Table>
            <Modal
                    v-model="showCreateUser"
                    title="用户管理">
                <Input v-model="account" placeholder="输入账号" style="width: 100%"/>
                <Input v-model="password" placeholder="输入密码" style="width: 100%"/>
                <Input v-model="username" placeholder="用户名" style="width: 100%"/>
                <div slot="footer">
                    <Button @click="cancel">取消</Button>
                    <Button @click="createOrUpdateUser">保存</Button>
                </div>
            </Modal>
        </Col>
    </Row>
</template>

<script>
    export default {
        name: "UserManage",
        components: {},
        data() {
            return {
                columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        type: 'index',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '账号',
                        key: 'account'
                    },
                    {
                        title: '用户名',
                        key: 'username'
                    }
                ],
                data: [],
                account: "",
                oldAccount: "",
                password: "",
                checkPassword: "",
                oldPassword: "",
                username: "",
                oldUsername: "",
                showCreateUser: false,
                isUpdate: false,
                selectRow: ""
            }
        },
        methods: {
            listUser() {
                this.$http({
                    method: 'post',
                    url: this.apiBase + '/blog/user/list',
                    data: {}
                })
                    .then(response => {
                        this.data = response.data.data.users;
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            createOrUpdateUser() {
                if (this.isUpdate) {
                    console.log(this.selectRow)
                    console.log(this.account)
                    console.log(this.username)
                    this.account = this.oldAccount;
                    this.username = this.oldUsername;
                    this.updateUser()
                } else {
                    this.createUser()
                }
            },
            createUser() {
                this.$http({
                    method: 'post',
                    url: this.apiBase + '/blog/user/create',
                    data: {
                        account: this.account,
                        password: this.password,
                        username: this.username
                    }
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.$Message.info("新建用户成功");
                            this.account = "";
                            this.password = "";
                            this.username = "";
                            this.showCreateUser = false;
                            this.listUser();
                        } else {
                            this.$Message.error("新建用户失败");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            updateUser() {
                this.$http({
                    method: 'post',
                    url: this.apiBase + '/blog/user/update',
                    data: {
                        bId: this.selectRow,
                        account: this.account,
                        username: this.username,
                        password: this.password
                    }
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.$Message.info("更新用户成功");
                            this.account = "";
                            this.password = "";
                            this.username = "";
                            this.showCreateUser = false;
                            this.listUser();
                        } else {
                            this.$Message.error("更新用户失败");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            deleteUser() {
                this.$http({
                    method: 'get',
                    url: this.apiBase + '/blog/user/delete/' + this.selectRow,
                    data: {}
                })
                    .then(response => {
                        if (response.data.code == 200) {
                            this.$Message.info("删除用户成功");
                            this.listUser();
                        } else {
                            this.$Message.error("删除用户失败");
                        }
                    })
                    .catch(error => {
                        console.log(error);
                    })
            },
            onCurrentChange(currentRow, oldCurrentRow) {
                this.selectRow = currentRow.bId;
                this.oldAccount = currentRow.account;
                this.oldUsername = currentRow.username;
            },
            cancel() {
                this.showCreateUser = false
            }
        },
        created() {
            this.listUser();
        }
    }
</script>

<style scoped>

</style>